<template>
  <view class="content">
    <view class="head_bg">
      <view class="head">
        <view class="head_box">
          <view class="head_left">
            <image src="../../static/bg_slices/2.png" mode=""></image>
            环境空气质量
          </view>
          <view @click="change">
            <view class="head_left2" v-if="btn_change">
              <image src="../../static/bg_slices/7.png" mode=""></image>
              徽州区
            </view>
          </view>
          <view @click="change">
            <view class="head_left2" v-if="!btn_change">
              <image src="../../static/bg_slices/7.png" mode=""></image>
              黄山市
            </view>
          </view>
        </view>
        <view class="head_right" v-if="weatherList">
          更新时间 {{weatherList.weather.time}}
        </view>
      </view>
      <!-- 仪表盘 -->
      <view class="atmosphere">
        <view class="region">
          <echarts ref="echat" :option="option1" style="height: 300rpx;width: 300rpx;" @click="echartsClick"></echarts>
        </view>
        <view class="atmosphere_word">
          <view class="atmosphere_a">
            首要污染物：
          </view>
          <view class="atmosphere_b">
            PM
          </view>
          <view class="atmosphere_c">
            2.5
          </view>
        </view>
      </view>
      <!-- 一 -->
      <view class="rainfall" v-if="weatherList">
        <view class="rainfall_a">
          <image src="../../static/bg_slices/3.png" mode=""></image>
          <view class="rainfall_aa">
            {{weatherList.weather.weather}}
          </view>
          <!-- <view class="rainfall_ab">
            kPa
          </view> -->
        </view>
        <view class="rainfall_a">
          <image src="../../static/bg_slices/6.png" mode=""></image>
          <view class="rainfall_aa">
            {{weatherList.weather.temperature}}℃
          </view>
        </view>
        <view class="rainfall_a">
          <image src="../../static/bg_slices/4.png" mode=""></image>
          <view class="rainfall_aa">
            {{weatherList.weather.humidity}}%
          </view>
        </view>
        <view class="rainfall_a">
          <image src="../../static/bg_slices/1.png" mode=""></image>
          <view class="rainfall_aa">
            {{weatherList.weather.windDirection}}
          </view>
        </view>
        <view class="rainfall_a">
          <image src="../../static/bg_slices/5.png" mode=""></image>
          <view class="rainfall_aa">
            {{weatherList.weather.windSpeed}}
          </view>
          <!-- <view class="rainfall_ab">
            m/s
          </view> -->
        </view>

      </view>
      <!-- 二 -->
      <view class="box">
        <view class="box_a" v-if="weatherList">
          <view class="box_color">
            <!-- 第一列 -->
            <view class="box_frist">
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_ab">
                    2.5
                  </view>
                  <view class="box_aa">
                    PM
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.pm2_5Color}">
                  <view class="box_aca">
                    {{weatherList.aqi.pm2_5}}
                  </view>
                  <view class="box_acb">
                    μg/m3
                  </view>
                </view>
              </view>
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_ab">
                    2
                  </view>
                  <view class="box_aa">
                    NO
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.no2Color}">
                  <view class="box_aca">
                    {{weatherList.aqi.no2}}
                  </view>
                  <view class="box_acb">
                    μg/m3
                  </view>
                </view>
              </view>
            </view>
            <view class="box_border">
            </view>
            <!-- 第二列 -->
            <view class="box_frist">
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_ab">
                    10
                  </view>
                  <view class="box_aa">
                    PM
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.pm10Color}">
                  <view class="box_aca">
                    {{weatherList.aqi.pm10}}
                  </view>
                  <view class="box_acb">
                    μg/m3
                  </view>
                </view>
              </view>
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_ab">
                  </view>
                  <view class="box_aa">
                    CO
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.coColor}">
                  <view class="box_aca">
                    {{weatherList.aqi.co}}
                  </view>
                  <view class="box_acb">
                    mg/m3
                  </view>
                </view>
              </view>
            </view>
            <view class="box_border">
            </view>
            <!-- 第三列 -->
            <view class="box_frist">
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_ab">
                    2
                  </view>
                  <view class="box_aa">
                    SO
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.so2Color}">
                  <view class="box_aca">
                    {{weatherList.aqi.so2}}
                  </view>
                  <view class="box_acb">
                    μg/m3
                  </view>
                </view>
              </view>
              <view class="box_frist_a">
                <view class="box_w">
                  <view class="box_bc">
                    3
                  </view>
                  <view class="box_aa">
                    O
                  </view>
                </view>
                <view class="box_ac box_color_a" :style="{background:weatherList.aqi.o3Color}">
                  <view class="box_aca">
                    {{weatherList.aqi.o3}}
                  </view>
                  <view class="box_acb">
                    μg/m3
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="eharts">
          <view class="e_head">
            <image src="../../static/xl/12.png" mode=""></image>
            24小时空气质量变化趋势
          </view>
          <view class="region_a">
            <view class="region_aa">
              <scroll-view scroll-x="true">
                <view class="scroll">
                  <echarts ref="echat" :option="option" style="height: 450rpx;width:3000rpx;" @click="echartsClick"></echarts>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- foot1 -->
    <!-- <view class="foot" v-if="falg_a==0">
      <view class="foot_bor" @click="slide">
      </view>
      <view class="foot_head">
        <view class="foot_head_a">
          <image src="../../static/xl/2.png" mode=""></image>
          徽州区大气精细化监管企业
        </view>
        <navigator class="foot_head_b" url="/pages/all_enterprises/all_enterprises">
          查看全部 >
        </navigator>
      </view>
      <view class=" foot_circle">
        <view class="circle circle_a">
          <view class="circle_aa">
            32
          </view>
          <view class="circle_ab">
            正常
          </view>
        </view>
        <view class="circle circle_b">
          <view class="circle_ba">
            12
          </view>
          <view class="circle_bb">
            异常
          </view>
        </view>
        <view class="circle circle_c">
          <view class="circle_ca">
            5
          </view>
          <view class="circle_cb">
            离线
          </view>
        </view>
      </view>
      <view class="foot_form">
        <image src="../../static/xl/3.png" mode=""></image>
        徽州区大气精细化监管企业
      </view>
      <view class="ranking_frist">
        <view class="ranking_two ranking_word">
          排名
        </view>
        <view class="ranking_three ranking_word">
          企业名称
        </view>
        <view class="ranking_four ranking_word">
          <view class="word_a">
            厂界
          </view>
          <image src="../../static/home_page/shangla.png" mode=""></image>
        </view>
        <view class="ranking_five ranking_word">
          <view class="word_a">
            排口
          </view>
          <image src="../../static/home_page/xia.png" mode=""></image>
        </view>
        <view class="ranking_seven ranking_word">
          状态
        </view>
      </view>
      <view class="ranking_number" v-for="(item,i) in enterprise" :key='i'>
        <view class="number_a number_style">
          {{item.id}}
        </view>
        <view class="number_b number_style">
          {{item.name}}
        </view>
        <view class="number_c number_style">
          {{item.num}}
          <view class="number_cd">
            {{item.num_a}}
          </view>
        </view>
        <view class="number_d number_style">
          {{item.num}}
          <view class="number_cd">
            {{item.num_a}}
          </view>
        </view>
        <view class="number_f">
          {{item.name_a}}
        </view>
      </view>
    </view> -->
    <!-- foot2 -->
    <view class="foot">
      <view class="box_hight">
      </view>
      <view class="foot_head">
        <view class="foot_head_a">
          <image src="../../static/xl/2.png" mode=""></image>
          预警报警统计
        </view>
        <navigator class="foot_head_b" url="/pages/all_enterprises/all_enterprises">
          查看全部 >
        </navigator>
      </view>
      <view class=" foot_circle">
        <view class="circular_box_a">
          正常
        </view>
        <view class="circular_box_b">
          预警
        </view>
        <view class="circular_box_c">
          报警
        </view>
        <view class="circular_box" @click="normal">
          <echarts ref="echat_a" :option="option2" style="height: 350rpx;" @click="echartsClick"></echarts>
        </view>
        <view class="circular_box" @click="early_warning">
          <echarts ref="echat_b" :option="option3" style="height: 350rpx;" @click="echartsClick"></echarts>
        </view>
        <view class="circular_box" @click="call_police">
          <echarts ref="echat_c" :option="option4" style="height: 350rpx;" @click="echartsClick"></echarts>
        </view>
        <!-- <view class="circle circle_a" @click="normal">
          <view class="circle_aa">
            {{rankingList.enterpriseSuccess}}
          </view>
          <view class="circle_ab">
            正常
          </view>
        </view> -->
        <!-- <view class="circle circle_b" @click="early_warning">
          <view class="circle_ba">
            {{rankingList.enterpriseWarn}}
          </view>
          <view class="circle_bb">
            预警
          </view>
        </view> -->
        <!-- <view class="circle circle_c" @click="call_police">
          <view class="circle_ca">
            {{rankingList.enterpriseError}}
          </view>
          <view class="circle_cb">
            报警
          </view>
        </view> -->
      </view>
      <view class="foot_form">
        <image src="../../static/xl/3.png" mode=""></image>
        监测浓度排名
      </view>
      <view class="ranking_frist">
        <view class="ranking_two ranking_word">
          排名
        </view>
        <view class="ranking_three ranking_word">
          企业名称
        </view>
        <view class="ranking_four ranking_word" v-if="num_sort_a==0">
          <view class="ranking_four_a" @click="btn_a">
            <view class="word_a">
              厂界
            </view>
          </view>
        </view>
        <view class="ranking_four ranking_word" v-if="num_sort_a==1">
          <view class="ranking_four_a" v-if="num_sort_c==0">
            <view class="word_a" @click="btn_e">
              厂界
            </view>
            <image src="../../static/home_page/shangla.png" mode=""></image>
          </view>
          <view class="ranking_four_a" v-if="num_sort_c==1">
            <view class="word_a" @click="btn_f">
              厂界
            </view>
            <image src="../../static/home_page/xia.png" mode=""></image>
          </view>
        </view>
        <view class="ranking_five ranking_word" v-if="num_sort_b==0">
          <view class="ranking_five_a" @click="btn_b">
            <view class="word_a">
              排口
            </view>
          </view>
        </view>
        <view class="ranking_five ranking_word" v-if="num_sort_b==1">
          <view class="ranking_five_a" v-if="num_sort_c==0">
            <view class="word_a" @click="btn_c">
              排口
            </view>
            <image src="../../static/home_page/shangla.png" mode=""></image>
          </view>
          <view class="ranking_five_a" v-if="num_sort_c==1">
            <view class="word_a" @click="btn_d">
              排口
            </view>
            <image src="../../static/home_page/xia.png" mode=""></image>
          </view>
        </view>
        <view class="ranking_seven ranking_word">
          状态
        </view>
      </view>
      <view v-for="(item,i) in rankingList.list" :key='i'>
        <view class="ranking_number" :class="i%2==0?'':'R_color'">
          <view v-if="i==0" class="number_a number_style_a ">
            <view class="ranking_style">
              {{i+1}}
            </view>
          </view>
          <view v-if="i==1" class="number_a number_style_a">
            <view class="ranking_style_a">
              {{i+1}}
            </view>
          </view>
          <view v-if="i==2" class="number_a number_style_a">
            <view class="ranking_style_b">
              {{i+1}}
            </view>
          </view>
          <view v-if="i>2" class="number_a number_style_a">
            <view class="ranking_style_c">
              {{i+1}}
            </view>
          </view>
          <view class="number_b number_style">
            {{item.name}}
          </view>
          <view class="number_c number_style">
            <view class="number_c_a" >
              <view :style="{color:item.map.hjgc05.temp}">
                {{item.map.hjgc05.valueStr}}
              </view>
            <!--  <view class="number_cd" :style="{color:item.map.hjgc05.temp}">
                {{item.map.hjgc05.unit}}
              </view> -->
            </view>
          </view>
          <view class="number_d number_style">
            <view class="number_d_a">
              <view :style="{color:item.map.hjgc01.temp}">
                {{item.map.hjgc05.valueStr}}
              </view>
           <!--   <view class="number_cd" :style="{color:item.map.hjgc01.temp}">
                {{item.map.hjgc01.unit}}
              </view> -->
            </view>
          </view>
          <view class="number_f num_color_a" v-if="item.state==0">
            {{item.stateName}}
          </view>
          <view class="number_f num_color_b" v-if="item.state==1">
            {{item.stateName}}
          </view>
          <view class="number_f num_color_c" v-if="item.state==2">
            {{item.stateName}}
          </view>
          <view class="number_f num_color_d" v-if="item.state==3">
            {{item.stateName}}
          </view>
        </view>
      </view>

    </view>
  </view>
</template>
<script>
  import echarts from '@/components/echarts/echarts.vue';
  export default {
    components: {
      echarts,
    },
    data() {
      return {
        num_sort: '2',
        num_sort_a: '0',
        num_sort_b: '1',
        num_sort_c: '0',
        // 黄山/徽州切换变量
        btn_change: true,
        All_enterpriseList: '',
        // 天气列表
        weatherList: '',
        // 排名列表
        rankingList: '',
        client: 'hzqAppclient',
        secret: 'hzqAppsecret',
        refreshToken: '',
        enterprise: [{
            id: '1',
            name: '永利',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '2',
            name: '智成',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '3',
            name: '康佳',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '4',
            name: '佳杰',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '5',
            name: '明杰',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '6',
            name: '向荣',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '7',
            name: '恒隆',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '8',
            name: '神剑',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '9',
            name: '嘉恒',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '10',
            name: '嘉博瑞',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '11',
            name: '万丽美',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '12',
            name: '华惠1',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '13',
            name: '华惠2',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '14',
            name: '锦峰',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '15',
            name: '中邦孚',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '16',
            name: '天和',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '17',
            name: '正杰',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '18',
            name: '中泽',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '19',
            name: '双益',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '20',
            name: '德邦',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '21',
            name: '华塑',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '22',
            name: '中博',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '23',
            name: '天马',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '24',
            name: '萨洛凯',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '25',
            name: '宏锦',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '26',
            name: '恒鹰',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '27',
            name: '精工',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '28',
            name: '新诺',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '29',
            name: '源点',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '30',
            name: '瑞亿',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '31',
            name: '泰达',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '32',
            name: '新远',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
          {
            id: '33',
            name: '聚能',
            num: '35',
            num_a: 'mg/m³',
            name_a: '正常'
          },
        ],
        // flag: 0,
        // falg_a: 0,
        option1: {
          series: [{
            type: 'gauge',
            min: 0,
            max: 500,
            splitNumber: 12,
            progress: {
              show: true,
              width: 8
            },
            // 底部全部进度条
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 6,
                color: [
                  [0, '#36CA42'],
                  [1, '#D2D5DA']
                ]
              }
            },
            axisTick: {
              show: false
            },
            itemStyle: {
              color: '#36CA42',
              shadowColor: 'rgba(0,138,255,0.45)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            splitLine: {
              show: false,
              length: 0,
              lineStyle: {
                width: 0,
                color: '#999'
              }
            },
            pointer: {
              length: '0',
              width: 0,
              offsetCenter: [0, '5%']
            },
            axisLabel: {
              show: false,
              distance: 0,
              color: '#999',
              fontSize: 0
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 0,
              itemStyle: {
                borderWidth: 0
              }
            },
            title: {
              offsetCenter: [0, '35%'],
              fontSize: 12,
              color: "#FFF",
              backgroundColor: "#36CA42",
              padding: [1, 11, 1, 11],
              borderRadius: 8,
            },
            detail: {
              // valueAnimation: true,
              fontSize: 30,
              color: '#36CA42',
              fontWeight: 'bolder',
              padding: [0, 0, -20, 0],
              offsetCenter: [0, '-35%'],
            },
            data: [{
              value: '',
              name: '',
            }]
          }]
        },
        option: {
          xAxis: {
            type: 'category',
            data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
              '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00',
              '22:00', '23:00'
            ]
          },
          yAxis: {
            name: 'AQI',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#5B8FF9' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            areaStyle: {}
          }]
        },
        option2: {
          title: {
            show: true,
            text:'', 
            x: "center",
            y: "center", // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: "12",
              color: "#4EA1FF",
              fontWeight: "700",
              fontFamily: "DINPro, DINPro-Regular",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false,
          },
          legend: {
            orient: "vertical",
            x: "left",
            show: false,
          },
          series: {
            name: "正常",
            type: "pie",
            radius: ["65%", "85%"],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{
                value: 0 ,
                name: "正常",
                itemStyle: {
                  color: "#4EA1FF",
                },
              },
              {
                value: 0 ,
                name: "正常",
                itemStyle: {
                  color: "#EDF5FF",
                },
              },
            ],
          },
        },
        // 二
        option3: {
          title: {
            show: true,
            text: '',
            x: "center",
            y: "center", // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: "12",
              color: "#FFCE6C",
              fontWeight: "400",
              fontFamily: "DINPro, DINPro-Regular",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false,
          },
          legend: {
            orient: "vertical",
            x: "left",
            show: false,
          },
          series: {
            name: "预警",
            type: "pie",
            radius: ["65%", "85%"],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{
                value: 0,
                name: "",
                itemStyle: {
                  color: "#FFCE6C",
                },
              },
              {
                value: 0,
                name: "",
                itemStyle: {
                  color: "#FFFAF0",
                },
              },
            ],
          },
        },
        // 三
        option4: {
          title: {
            show: true,
            text: '',
            x: "center",
            y: "center", // 通过x,y将标题(进度)定位在圆环中心
            textStyle: {
              fontSize: "12",
              color: "#FF806C",
              fontWeight: "400",
              fontFamily: "DINPro, DINPro-Regular",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{d}%",
            show: false,
          },
          legend: {
            orient: "vertical",
            x: "left",
            show: false,
          },
          series: {
            name: "报警",
            type: "pie",
            radius: ["65%", "85%"],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{
                value: 0,
                name: "报警",
                itemStyle: {
                  color: "#FF806C",
                },
              },
              {
                value:0,
                name: "报警",
                itemStyle: {
                  color: "#FFF2F0",
                },
              },
            ],
          },
        },
      }
    },
    onLoad() {
      // this.refreshToken = uni.getStorageSync('r_token')
      // console.log('refreshToken', this.refreshToken)
      // this.getAll_enterprise()
      // this.getRefreshToken()
      this.getHZweather()
      this.getHZAQI()
      this.getranking()
      this.$base.checkUserDialog()
    },
    methods: {
      // 排序
      btn_a() {
        this.num_sort_a = 1
        this.num_sort_b = 0
        this.num_sort_c = 0
        this.num_sort = 0
        this.getranking()
      },
      btn_b() {
        this.num_sort_a = 0
        this.num_sort_b = 1
        this.num_sort_c = 0
        this.num_sort = 2
        this.getranking()
      },
      btn_c() {
        this.num_sort_c = 1
        this.num_sort = 3
        this.getranking()
      },
      btn_d() {
        this.num_sort_c = 0
        this.num_sort = 2
        this.getranking()
      },
      btn_e() {
        this.num_sort_c = 1
        this.num_sort = 1
        this.getranking()
      },
      btn_f() {
        this.num_sort_c = 0
        this.num_sort = 0
        this.getranking()
      },
      change() {
        this.btn_change = !this.btn_change
        if (this.btn_change) {
          this.getHZweather()
          this.getHZAQI()
        }
        if (!this.btn_change) {
          this.getHSweather()
          this.getHSAQI()
        }
      },
      // 正常
      normal() {
        uni.navigateTo({
          url: '/pages/all_enterprises/all_enterprises?num=1'
        });
      },
      // 预警
      early_warning() {
        uni.navigateTo({
          url: '/pages/all_enterprises/all_enterprises?num=2'
        });
      },
      // 报警
      call_police() {
        uni.navigateTo({
          url: '/pages/all_enterprises/all_enterprises?num=3'
        });
      },
      // 查询企业的总数和企业检测详情
      getAll_enterprise() {
        this.$http.get('/envirnment-air/homepage/enterpriseCount', {}).then(res => {
          // console.log('企业信息',res)
          if (res.code == '00000') {
            this.All_enterpriseList = res.data
            // console.log('企业信息',this.All_enterpriseList)
          }
        })
      },
      // 获取徽州区天气和空气数据
      getHZweather() {
        this.$http.get('/envirnment-air/app/homepage/hzWeatherAndAir', {}).then(res => {
          console.log('天气列表', res)
          if (res.code == '00000') {
            this.weatherList = res.data
            this.option1.series[0].data[0].value = res.data.aqi.aqi
            this.option1.series[0].data[0].name = res.data.aqi.quality
            this.option1.series[0].axisLine.lineStyle.color[0][0] = res.data.aqi.aqi / 500
            this.$refs.echat.update(this.option1)
            // console.log('天气列表', this.option1.series[0].axisLine.lineStyle.color[0])
          }
        })
      },
      // 获取黄山区天气和空气数据
      getHSweather() {
        this.$http.get('/envirnment-air/app/homepage/hsWeatherAndAir', {}).then(res => {
          console.log('天气列表', res)
          if (res.code == '00000') {
            this.weatherList = res.data
            this.option1.series[0].data[0].value = res.data.aqi.aqi
            this.option1.series[0].data[0].name = res.data.aqi.quality
            this.option1.series[0].axisLine.lineStyle.color[0][0] = res.data.aqi.aqi / 500
            this.$refs.echat.update(this.option1)
            // console.log('天气列表22', this.option1.series[0].axisLine.lineStyle.color[0])
          }
        })
      },
      // 徽州区24小时AQI趋势
      getHZAQI() {
        this.$http.get('/envirnment-air/app/homepage/hzAqi24Trend', {}).then(res => {
          // console.log('AQI趋势',res)
          if (res.code == '00000') {
            let timelist = []
            let numlist = []
            res.data.forEach((item, index) => {
              timelist.push(item.time)
              numlist.push(item.aqi)
            })
            this.option.xAxis.data = timelist
            this.option.series[0].data = numlist
            this.$refs.echat.update(this.option)
            // console.log('AQI趋势',timelist,numlist)
            // this.weatherList = res.data
          }
        })
      },
      // 黄山区24小时AQI趋势
      getHSAQI() {
        this.$http.get('/envirnment-air/app/homepage/hsAqi24Trend', {}).then(res => {
          // console.log('AQI趋势',res)
          if (res.code == '00000') {
            let timelist = []
            let numlist = []
            res.data.forEach((item, index) => {
              timelist.push(item.time)
              numlist.push(item.aqi)
            })
            this.option.xAxis.data = timelist
            this.option.series[0].data = numlist
            this.$refs.echat.update(this.option)
            // console.log('AQI趋势',timelist,numlist)
            // this.weatherList = res.data
          }
        })
      },

      // 预警报警统计和检测浓度排名
      getranking() {
        this.$http.get('/envirnment-air/app/homepage/enterpriseAnalysis', {
          sort: this.num_sort
        }).then(res => {
          // console.log('排名',res)
          if (res.code == '00000') {
            console.log('排名', res)
            this.rankingList = res.data
            let total = res.data.enterpriseError + res.data.enterpriseSuccess + res.data.enterpriseWarn
            this.option2.title.text = res.data.enterpriseSuccess 
            this.option2.series.data[0].value = res.data.enterpriseSuccess
            this.option2.series.data[1].value = total - res.data.enterpriseSuccess
            // this.$refs.echat_a.update(this.option2)
            this.option3.title.text = res.data.enterpriseWarn
            this.option3.series.data[0].value = res.data.enterpriseWarn
            this.option3.series.data[1].value = total - res.data.enterpriseWarn
            // this.$refs.echat_b.update(this.option3)
            this.option4.title.text = res.data.enterpriseError
            this.option4.series.data[0].value = res.data.enterpriseError
            this.option4.series.data[1].value = total - res.data.enterpriseError
            // this.$refs.echat_c.update(this.option4)
            // console.log('total',total)
          }
        })
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      // slide() {
      //   this.flag = 1
      //   this.falg_a = 1
      // },
      // slide_a() {
      //   this.flag = 0
      // }
    }
  }
</script>
<style lang="scss">
  .content {
    width: 100%;
    // height: 100vh;
    background: #F7F7F7;
  }

  .head_bg {
    // overflow: hidden;
    width: 100%;
    height: 1255rpx;
    background: url(../../static/bg_slices/home1.png) no-repeat;
    background-size: 100% 100%;
  }

  .head {
    padding: calc(20rpx + var(--status-bar-height)) 0 0 42rpx;
    display: flex;
    justify-content: space-between;
  }

  .head_box {
    display: flex;
    align-items: center;
  }

  .head_left {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 48rpx;
    color: #FFFFFF;
    opacity: 1;

    image {
      width: 25rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }
  }

  .head_left2 {
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    // line-height: 34rpx;
    margin-left: 20rpx;
    width: 114rpx;
    height: 28rpx;
    border: 1rpx solid #FFFFFF;
    opacity: 1;
    border-radius: 14rpx;
    color: #FFFFFF;
    opacity: 1;

    image {
      width: 20rpx;
      height: 20rpx;
      margin: 0 3rpx 0 16rpx;
    }
  }

  .head_right {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    line-height: 48rpx;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    margin-right: 40rpx;
  }

  .atmosphere {
    position: relative;
    width: 416rpx;
    height: 158rpx;
    margin: 0 auto 80rpx;
    // background-color: #52CA36;
    border-radius: 316rpx 316rpx 0 0;
    transform: translateX(-5%);
  }

  .atmosphere_word {
    position: absolute;
    top: 255rpx;
    left: 170rpx;
    display: flex;
    align-items: flex-end;
  }

  .atmosphere_a {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #7A8AAA;
    opacity: 1;
  }

  .atmosphere_b {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    opacity: 1;
  }

  .atmosphere_c {
    font-size: 20rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    opacity: 1;
  }

  .rainfall {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 150rpx auto 0;
    width: 702rpx;
    height: 72rpx;
    // background: rgba(255, 255, 255, 0.8);
    opacity: 1;
    border-radius: 10rpx;
  }

  .rainfall_a:last-child {
    border: 0;
    padding: 0;
  }

  .rainfall_a {
    width: 20%;
    display: flex;
    // padding-right: 24rpx;
    justify-content: center;
    align-items: flex-end;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    opacity: 1;
    border-right: 2rpx solid #BFD5FF;

    image {
      margin-right: 6rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .rainfall_aa {
    line-height: 24rpx;
  }

  .rainfall_ab {
    font-size: 12rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
  }

  .box {
    margin: 494rpx auto 0;
    width: 100%;
    height: 565rpx;
    // background: #FFFFFF;
    // opacity: 1;
    border-radius: 10rpx;
  }

  .box_hight {
    width: 100%;
    height: 20rpx;
    background-color: #F7F7F7;
  }

  .box_a {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    width: 100%;
    height: 187rpx;
    // border-bottom: 2rpx solid #BFD5FF;
    // background: #f00;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%) !important;
    // opacity: 1;
  }

  .box_color {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    width: 670rpx;
    height: 187rpx;
    border-bottom: 2rpx solid #BFD5FF;
  }

  .box_w {
    width: 50rpx;
    display: flex;
    margin-right: 16rpx;
    flex-direction: row-reverse;
    align-items: flex-end;
    text-align: right;
  }

  .box_aa {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #58657B;
  }

  .box_ab {
    // width: 50rpx;
    font-size: 14rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #58657B;
  }

  .box_bc {
    // width: 65rpx;
    font-size: 14rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #58657B;
  }

  .box_ac {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    width: 106rpx;
    height: 34rpx;
    // line-height: 34rpx;
    // text-align: center;
    border-radius: 5rpx;
  }

  .box_acb {
    font-size: 16rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 10rpx;
    opacity: 1;
  }

  .box_border {
    width: 2rpx;
    height: 102rpx;
    background-color: #BFD5FF;
    margin-top: 41rpx;
  }

  .box_frist_a {
    display: flex;
    align-items: flex-end;
    margin-top: 41rpx;
  }

  .eharts {
    background-color: #FFFFFF;
    overflow: hidden;
  }

  .e_head {
    margin: 40rpx 0 0 40rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58657B;

    image {
      margin-right: 6rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }

  .region {
    transform: translate(25%, 5%);
  }

  .region_a {
    padding: 0 26rpx 0 36rpx;
  }

  .region_aa {
    width: 100%;

    scroll-view {
      width: 100%;
    }
  }

  .scroll {
    width: 100%;
    transform: translateX(-35%);
  }

  .foot {
    position: absolute;
    top: 1660rpx;
    // top: 0;
    width: 750rpx;
    // height: 1000rpx;
    background: rgba(255, 255, 255, 0.98);
    opacity: 1;
  }

  // .slide {
  //   animation: mymove 1s infinite;
  //   animation-iteration-count: 1;
  //   animation-fill-mode: forwards;
  //   position: absolute;
  //   width: 750rpx;
  //   // height: 1000rpx;
  //   background: rgba(255, 255, 255, 0.98);
  //   box-shadow: 0px 0px 10rpx rgba(71, 83, 104, 0.4);
  //   opacity: 1;
  //   border-radius: 50rpx 50rpx 0px 0px;
  // }

  // .slide_a {
  //   animation: mymove_a 1s infinite;
  //   animation-iteration-count: 1;
  //   animation-fill-mode: forwards;
  //   position: absolute;
  //   // top: 350rpx;
  //   width: 750rpx;
  //   // height: 1000rpx;
  //   background: rgba(255, 255, 255, 0.98);
  //   box-shadow: 0px 0px 10rpx rgba(71, 83, 104, 0.4);
  //   opacity: 1;
  //   border-radius: 50rpx 50rpx 0px 0px;
  // }

  // @keyframes mymove {
  //   from {
  //     top: 400rpx;
  //   }

  //   to {
  //     top: 1055rpx;
  //   }
  // }

  // @keyframes mymove_a {
  //   from {
  //     top: 1055rpx;
  //   }

  //   to {
  //     top: 400rpx;
  //   }
  // }

  .foot_bor {
    margin: 16rpx auto 0;
    width: 50rpx;
    height: 6rpx;
    background: #DDDDDF;
    opacity: 1;
    border-radius: 4rpx;
  }

  .foot_bor_a {
    margin: 16rpx auto 0;
    width: 50rpx;
    height: 6rpx;
    background: #DDDDDF;
    opacity: 1;
    border-radius: 4rpx;
  }

  .foot_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26rpx 0 0 40rpx;
  }

  .foot_head_a {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58657B;

    image {
      margin-right: 6rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }

  .foot_head_b {
    margin-right: 40rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #4EA1FF;
  }

  .foot_circle {
    display: flex;
    margin-top: 60rpx;
    justify-content: space-around;
  }

  .circle {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
  }

  .circle_a {
    border: 10rpx solid #4EA1FF;
  }

  .circle_b {
    border: 10rpx solid #FFCE6C;
  }

  .circle_c {
    border: 10rpx solid #FF806C;
  }

  .circle_aa {
    margin-top: 20rpx;
    text-align: center;
    font-size: 48rpx;
    font-weight: 700;
    color: #4EA1FF;
  }

  .circle_ab {
    text-align: center;
    font-size: 20rpx;
    color: #4EA1FF;
  }

  .circle_ba {
    margin-top: 20rpx;
    text-align: center;
    font-size: 48rpx;
    font-weight: 700;
    color: #FFCE6C;
  }

  .circle_bb {
    text-align: center;
    font-size: 20rpx;
    color: #FFCE6C;
  }

  .circle_ca {
    margin-top: 20rpx;
    text-align: center;
    font-size: 48rpx;
    font-weight: 700;
    color: #FF806C;
  }

  .circle_cb {
    text-align: center;
    font-size: 20rpx;
    color: #FF806C;
  }

  .foot_form {
    margin: 60rpx 0 0 40rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #58657B;

    image {
      margin-right: 6rpx;
      width: 28rpx;
      height: 28rpx;
    }

    ;
  }

  .ranking_frist {
    margin: 35rpx auto 15rpx;
    width: 702rpx;
    height: 44rpx;
    // background: #F2F2F2;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    border-bottom: 2rpx solid #BFD5FF;
  }

  .ranking_two {
    width: 100rpx;
    text-align: center;
    // margin: 0 45rpx;
  }

  .ranking_three {
    width: 160rpx;
    text-align: center;
    // margin-right: 79rpx;
  }

  .word_a {
    margin-right: 11rpx;
  }

  .ranking_four {
    text-align: center;
    width: 160rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_four_a {
    display: flex;
    align-items: center;
    margin: 0 auto;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_five_a {
    display: flex;
    align-items: center;
    margin: 0 auto;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_five {
    width: 160rpx;
    display: flex;
    align-items: center;

    // margin-right: 57rpx;
    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_seven {
    text-align: center;
    width: 160rpx;
    // margin-right: 30rpx;
  }

  .ranking_word {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .ranking_number {
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 95rpx;
    margin: 0 auto;
  }

  .number_style {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .number_style_a {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .number_a {
    width: 100rpx;
    text-align: center;
    // margin: 0 80rpx 0 110rpx;
  }

  .number_b {
    width: 160rpx;
    text-align: center;
    // margin-right: 65rpx;
  }

  .number_cd {
    font-size: 18rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 8rpx 0 0 6rpx;
  }

  .number_c {
    width: 160rpx;
    display: flex;
    // margin: 0 62rpx 0 10rpx;
  }

  .number_c_a {
    margin: 0 auto;
    display: flex;
    // margin: 0 62rpx 0 10rpx;
  }

  .number_d {
    width: 160rpx;
    display: flex;
    // margin-right: 50rpx;
  }

  .number_d_a {
    display: flex;
    margin: 0 auto;
    // margin-right: 50rpx;
  }


  .number_f {
    width: 160rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
  }

  .num_color_a {
    color: #94A5C7;
  }

  .num_color_b {
    color: #3792FF;
  }

  .num_color_c {
    color: #FFCE6C;
  }

  .num_color_d {
    color: #FF806C;
  }

  .R_color {
    background: rgba(148, 165, 199, 0.08);
    opacity: 1;
  }

  .ranking_style {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/1.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_a {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/2.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_b {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/3.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_c {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/4.png) no-repeat;
    background-size: 100% 100%;
  }

  .circular_box {
    width: 200rpx;
    height: 200rpx;
    transform: translateY(-30%);
  }
  .circular_box_a{
    position: absolute;
    top: 280rpx;
    left: 108rpx;
    font-size: 18rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #4EA1FF;
    z-index: 999;
  }.circular_box_b{
    position: absolute;
    top: 280rpx;
    font-size: 18rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFCE6C;
    z-index: 999;
  }.circular_box_c{
    position: absolute;
    top: 280rpx;
    right: 108rpx;
    font-size: 18rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FF806C;
    z-index: 999;
  }
</style>
